import React, { useState,useEffect } from 'react';
import { Table, Form, Button, Space, List} from 'antd';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import Add from './addMember';
import Edit from './editMember';
import styles from './styles.module.scss';



const mapStateToProps = state => {
  return {
  memberList: state.adminPage.memberList,
  count: state.adminPage.count,
}}

const mapDispatchToProps = dispatch => {
    return {
      getMemberList: dispatch.adminPage.getMemberList,
      addMember: dispatch.adminPage.addMember,
      deleteMember:  dispatch.adminPage.deleteMember,
      editMember: dispatch.adminPage.editMember,
    }
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withRouter(({count, memberList, getMemberList ,addMember, deleteMember, editMember}) => {
    const loading = memberList.length;
    // console.log(deleteMember);
    memberList.forEach((item,index)=>{
      item.key= index;
    })
    const tableColumn = [
        {
            title: '用户名',
            key: 'username',
            dataIndex: 'username',
            render:text => <a>{text}</a>
        },
        {
            title: '地址',
            key: 'address',
            dataIndex: 'address',
        },
        {
            title: '负责人',
            key: 'name',
            dataIndex: 'name'
        },
        {
            title: '权限',
            key: 'role',
            dataIndex: 'role'
        },
        {
            title: '单位',
            key: 'unitName',
            dataIndex: 'unitName'
        },
        {
            title: '操作',
            key: 'action',
            render:(text,record) => (
              <Space key='actions' size="middle">
                <Edit record={record} editMember={editMember}></Edit>
                <Button type="text" key='delete'  onClick={()=>{
                  // countChange();
                  deleteMember({username:record.username})
                }}>删除</Button>
              </Space>
            )
        }
    ];
    useEffect(() => {
      getMemberList();
    },[count]);
    // useEffect(() => {
    //     addMember();
    // }, []);
    
    return (
        <div className={ styles.container }>
            <Form layout="inline">
                <Form.Item>
                    <Add addMember={addMember} ></Add>
                </Form.Item>
            </Form>
            <Table className={ styles.table } loading={ loading }  dataSource={ memberList } bordered columns={ tableColumn }/>
        </div>
    );
}));
